<template>
  <view class="tea-price-page">
    <!-- 顶部导航栏 -->
    <!-- <van-nav-bar title="茶价格录入" left-arrow fixed /> -->

    <!-- 表单卡片区 -->
    <view class="tea-card-list">
      <view
        v-for="(item, idx) in teaList"
        :key="item.id"
        class="tea-card"
      >
        <view class="tea-card-header">
          <text class="tea-card-title">编号{{ idx + 1 }}</text>
          <view
            class="tea-card-delete"
            @click="removeTea(idx)"
          >
            <van-icon
              name="delete"
              size="20"
              color="#0C8D6A"
            />
            <text class="delete-text">删除</text>
          </view>
        </view>
        <van-cell-group>
          <van-field
            v-for="field in fields"
            :key="field.key"
            :label="field.label"
            :value="item[field.key]"
            :placeholder="field.placeholder"
            :type="field.type || 'text'"
            :border="field.border !== false"
            :readonly="field.readonly"
            @change="(val) => inputChange(val, idx, field.key)"
          >
            <template
              v-if="field.unit"
              #right-icon
            >
              <text class="tea-card-unit">{{ field.unit }}</text>
            </template>
          </van-field>
        </van-cell-group>
      </view>
    </view>

    <!-- 继续增加按钮 -->
    <view class="add-btn-wrap">
      <van-button
        class="add-btn"
        type="default"
        block
        round
        @click="addTea"
      >
        <van-icon
          name="add-o"
          size="16"
          color="#0C8D6A"
        />
        <text class="add-btn-text">继续增加</text>
      </van-button>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <van-button
        class="footer-btn cancel"
        type="default"
        block
        round
        @click="cancel"
        >取消</van-button
      >
      <van-button
        class="footer-btn save"
        color="#0C8D6A"
        type="primary"
        block
        round
        @click="save"
        >保存</van-button
      >
    </view>
  </view>
</template>

<script>
  import {
    selectCyTeaPricesList,
    saveOrUpdateTeaPrices,
    deleteTeaPrices
  } from '@/api/personal.js'

  export default {
    data() {
      return {
        teaList: [],
        fields: [
          {
            label: '茶叶品种',
            key: 'teaVarieties',
            placeholder: '请输入',
            border: true,
            readonly: false
          },
          {
            label: '茶叶等级',
            key: 'teaGrade',
            placeholder: '请输入',
            border: true,
            readonly: false
          },
          {
            label: '茶叶价格',
            key: 'maochaAcquisitionPrice',
            placeholder: '请输入',
            type: 'digit',
            border: true,
            unit: '元',
            readonly: false
          },
          {
            label: '重量单位',
            key: 'unit',
            placeholder: '',
            unit: 'g',
            border: false,
            readonly: true
          }
        ],
        openId: ''
      }
    },
    created() {
      // 假设openId已通过登录等方式获取
      this.openId = uni.getStorageSync('user')?.openId || ''
      this.fetchTeaPrices()
    },
    methods: {
      inputChange(val, idx, key) {
        if (key === 'unit') return
        const value = val?.detail !== undefined ? val.detail : val
        this.teaList[idx][key] = value
      },
      addTea() {
        this.teaList.push({
          id: '',
          teaVarieties: '',
          teaGrade: '',
          maochaAcquisitionPrice: '',
          unit: '500'
        })
      },
      removeTea(idx) {
        const item = this.teaList[idx]
        if (item.id) {
          deleteTeaPrices({ id: item.id }).then(() => {
            this.teaList.splice(idx, 1)
            uni.showToast({ title: '删除成功', icon: 'success' })
          })
        } else {
          this.teaList.splice(idx, 1)
        }
      },
      fetchTeaPrices() {
        if (!this.openId) return
        selectCyTeaPricesList({ openId: this.openId }).then((res) => {
          if (res.data && res.data.length > 0) {
            this.teaList = res.data.map((item) => ({
              id: item.id,
              teaVarieties: item.teaVarieties,
              teaGrade: item.teaGrade,
              maochaAcquisitionPrice: item.maochaAcquisitionPrice,
              unit: '500'
            }))
          } else {
            this.teaList = []
          }
        })
      },
      save() {
        if (!this.openId) {
          uni.showToast({ title: '未获取到用户', icon: 'none' })
          return
        }
        const saveAll = this.teaList.map((item) => {
          const payload = {
            openId: this.openId,
            id: item.id || '',
            teaVarieties: item.teaVarieties,
            teaGrade: item.teaGrade,
            maochaAcquisitionPrice: item.maochaAcquisitionPrice,
            unit: '500g'
          }
          console.log('payload: ', payload)
          return saveOrUpdateTeaPrices(payload)
        })
        Promise.all(saveAll).then(() => {
          uni.showToast({ title: '保存成功', icon: 'success' })
          this.fetchTeaPrices()
        })
      },
      cancel() {
        uni.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
  .tea-price-page {
    background: #f5f6fa;
    min-height: 100vh;
    padding-bottom: 160rpx;
  }

  .tea-card-list {
    padding: 32rpx 24rpx 0 24rpx;
  }

  .tea-card {
    background: #fff;
    /* border-radius: 16rpx; */
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
    margin-bottom: 32rpx;
    padding: 0 0 24rpx 0;
    position: relative;
  }

  .tea-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
  .tea-card-title {
    font-weight: bold;
    font-size: 32rpx;
    color: #222;
  }
  .tea-card-delete {
    display: flex;
    align-items: center;
    color: #0c8d6a;
    font-size: 26rpx;
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    cursor: pointer;
  }
  .delete-text {
    margin-left: 4rpx;
  }

  .tea-card-field {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    height: 80rpx;
    position: relative;
    background: #fff;
    &:last-child {
      border-bottom: none;
    }
  }
  .tea-card-label {
    width: 180rpx;
    color: #888;
    font-size: 28rpx;
  }
  .tea-card-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 28rpx;
    color: #222;
    height: 80rpx;
  }
  .tea-card-unit {
    color: #888;
    font-size: 28rpx;
    margin-left: 8rpx;
  }
  .tea-card-placeholder {
    color: #ccc;
  }

  .add-btn-wrap {
    padding: 0 48rpx;
    margin-bottom: 32rpx;
  }
  .add-btn {
    background: #fff;
    color: #0c8d6a;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    border-radius: 44rpx;
    box-shadow: 0 2rpx 8rpx 0 rgba(19, 174, 124, 0.04);
  }
  .add-btn-text {
    margin-left: 8rpx;
    color: #0c8d6a;
  }

  .footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx 48rpx 32rpx;
    z-index: 10;
    box-shadow: 0px 7px 46px 0px rgba(0, 0, 0, 0.33);
    background: #fff;
  }
  .footer-btn {
    flex: 1;
    height: 88rpx;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin: 0 12rpx;
  }
  .footer-btn.cancel {
    background: #fff;
    color: #222;
    box-shadow: 0 2rpx 8rpx 0 rgba(19, 174, 124, 0.04);
  }
  .footer-btn.save {
    color: #fff;
  }
</style>
